<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        /* v-cloak 在html属于标签内的自定义属性 */
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <!-- 视图层 -->
    <div id="app" v-cloak>
        <p>{{str}}</p>
        <p>{{num}}</p>
        <p>{{bool}}</p>
    </div>
</body>
<script>

    // v-cloak 等页面编译完毕再展示视图  (配合css使用)


    // 页面加载时进行初始化渲染
    // var app = new Vue({  // 创建Vue实例
    //     el:"#app",   // 挂载的元素
    //     data:{ // 数据层 => 对应属性名将属性值 拼接到模版语法中
    //         str:"hello Vue",
    //         num:100,
    //         bool:true,
    //     }
    // })

    // 2s后 进行初始化渲染
    setTimeout(() => {
        var app = new Vue({  // 创建Vue实例
            el: "#app",   // 挂载的元素
            data: { // 数据层 => 对应属性名将属性值 拼接到模版语法中
                str: "hello Vue",
                num: 100,
                bool: true,
            }
        })
    }, 2000);







</script>

</html>